<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山羊の前端小窝</title>
    <style>
        * {
            margin: 0px;
            bottom: 0px;
            padding: 0px;
            list-style: none;
            text-decoration: none;
        }

        body {
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
            background-color: rgb(170, 190, 250);
        }

        .shell{
            width: 900px;
            height: 500px;
            position: relative;
            overflow-x: hidden;
            border-radius: 5px;
            border: 10px #fff solid;
            box-shadow: 20px 30px 20px rgba(0,0,0,.5);
        }
        .images{
            width: 300%;
            height: 100%;
            display: flex;
            position: absolute;
            left: 0;
            transition: .2s;
        }
        .img{
            width: 100%;
            background-size: cover;
        }
        .img:nth-child(1){
            background-image: url("images/1.jpg");
        }
        .img:nth-child(2){
            background-image: url("images/2.jpg");
        }
        .img:nth-child(3){
            background-image: url("images/3.jpg");
        }
        .min-images{
            display: flex;
            justify-content: space-evenly;
            position: absolute;
            bottom: 20px;
            width: 40%;
            z-index: 999;
            right: 10%;
        }
        .min{
            width: 60px;
            height: 60px;
            /* 鼠标悬浮时显示按钮指针 */
            cursor: pointer;
            border-radius: 50%;
            background-size: cover;
            border: solid 5px rgba(255,255,255,0.5);
            /* 照片偏移量 */
            background-position: -20px 0;
        }
        .min:nth-child(1){
            background-image: url("images/1.jpg");
        }
        .min:nth-child(2){
            background-image: url("images/2.jpg");
        }
        .min:nth-child(3){
            background-image: url("images/3.jpg");
        }
        .button{
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            justify-content: space-between;
            user-select: none;
        }
        .button-left,
        .button-right{
            font-size: 50px;
            background-color: rgba(160,190,255,0.7);
            padding: 0 20px;
            line-height: 500px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="shell">
        <ul class="images">
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
        </ul>
        <ul class="min-images">
            <li class="min"></li>
            <li class="min"></li>
            <li class="min"></li>
        </ul>
        <div class="button">
            <div class="button-left"><</div>
            <div class="button-right">></div>
        </div>
    </div>
</body>
<script>
    let left = document.querySelector('.button-left')
    let right = document.querySelector('.button-right')
    let min = document.querySelectorAll('.min')
    let images = document.querySelector('.images')

    let index = 0
    let time

    function position() {
        images.style.left = (index * -100) + "%"
    }
    function add(){
        if(index >= min.length-1){
            index = 0
        }else{
            index++
        }
    }
    function desc(){
        if(index <1){
            index = min.length-1
        }else{
            index--
        }
    }
    function timer(){
        time = setInterval(()=>{
            index++
            desc()
            add()
            position()
        },3000)
    }
    left.addEventListener('click',()=>{
        desc()
        position()
        clearInterval(time)
        timer()
    })
    right.addEventListener('click',()=>{
        add()
        position()
        clearInterval(time)
        timer()
    })
    for(let i = 0;i<min.length;i++){
        min[i].addEventListener('click',()=>{
            index = i
            position()
            clearInterval(time)
            timer()
        })
    }
    timer()
</script>

</html>